<!--
 * @Descripttion: 执行规则表单
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-14 21:46:54
-->
<template>
  <DileDrawer
    v-model="executeRuleForm.visible"
    :loading="executeRuleForm.loading"
    size="50%"
    @sure="hanldeSure"
  >
    <template #header>
      <span>{{
        $t(`table.btnArr.${!executeRuleForm.formData.id ? "add" : "edit"}`)
      }}</span>
    </template>
    <template #default>
      <el-form
        ref="formRef"
        :model="executeRuleForm.formData"
        :rules="formRules"
        label-width="5.5rem"
        size="large"
        status-icon
      >
        <el-form-item
          :label="$t('page.systemManageArr.executeRuleArr.name')"
          prop="name"
        >
          <el-input v-model="executeRuleForm.formData.name" />
        </el-form-item>
        <el-form-item class="form-item-cron" :style="{ margin: 0 }">
          <!-- cron表达式 -->
          <DileCron
            :cron-value="executeRuleForm.formData.ruleExpression"
            @change="changeCron"
            :hideArr="['Seconds', 'Minutes']"
            max-height="300px"
          />
        </el-form-item>
      </el-form>
    </template>
  </DileDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, nextTick } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import { useI18n } from "vue-i18n";
import { ElNotification } from "element-plus";
import DileCron from "@/components/dile-cron/index.vue";
import DileDrawer from "@/components/dile-drawer/index.vue";
import Dile_APi from "@/api";

const emit = defineEmits(["refresh"]);

let { t } = useI18n();

/**
 * @Author: xzh
 * @Descripttion: 表单默认数据
 * @Param:
 */
let defaultData = () => ({
  id: 0,
  name: "", //规则名称
  ruleExpression: "", //cron 表达式
  ruleDescription: "", //规则描述
  status: true, //状态
  remark: "", //备注
});
/**
 * @Author: xzh
 * @Descripttion: 执行规则表单参数
 * @Param:
 */
let executeRuleForm = reactive<object_Inf>({
  visible: false,
  loading: false,
  //表单数据
  formData: defaultData(),
});

/**
 * @Author: xzh
 * @Descripttion: cron更改
 * @Param:
 * @param {*} val
 */
let changeCron = (val: string) => {
  if (typeof val !== "string") return false;
  let { ruleExpression } = toRefs(executeRuleForm.formData);
  ruleExpression.value = val;
};

/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    name: [
      {
        required: true,
        message:
          t("common.enter") + t("page.systemManageArr.executeRuleArr.name"),
        trigger: "change",
      },
    ],
  });
});

/**
 * @Author: xzh
 * @Descripttion:初始化加载
 * @Param:
 * @param {*} id 岗位主键
 */
let init = async (id: number) => {
  let { visible, loading } = toRefs(executeRuleForm);
  visible.value = true;
  await nextTick();
  try {
    loading.value = true;
    //加载表单数据
    await initFormData(id);
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 加载表单数据
 * @Param:
 */
let initFormData = async (id: number) => {
  let data = !!id ? await Dile_APi.getExecuteRuleInfo(id) : defaultData();
  Object.assign(executeRuleForm.formData, data);
};

/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let hanldeSure = async () => {
  let { formData, loading, visible } = toRefs(executeRuleForm),
    valid = await formRef.value.validate();
  if (!valid || !!loading.value) {
    return false;
  }
  try {
    loading.value = true;
    await Dile_APi.saveExecuteRule({
      ...formData.value,
    });
    //触发刷新回调
    emit("refresh");
    //提示成功
    ElNotification({
      message: t("common.message.OperationSuccess"),
      type: "success",
    });
    //关闭弹框
    visible.value = false;
  } finally {
    loading.value = false;
  }
};

defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
.el-form {
  :deep(.form-item-cron) {
    .el-form-item__content {
      margin: 0 !important;
    }
  }
}
</style>
